以本产品的上传商品图片为例,它包含了”上传图片后的预览”、”清空预览图片”、”保存图片"三个部分。上传图片后,先将图片文件临时存放到session中,如果需要保存图片,再从session中获取到文件并保存到服务器。
1、 上传图片预览
上传图片预览实现了上传图片,并且在页面显示图片,此时还没有在服务器完成修改操作:
(1) 上传图片HTML代码。
支持100k大小的jpg、png、jpeg格式图片
上传商品图片 清空商品图片(2) 上传图片js代码。
使用到了Layui框架的upload模块。upload.render函数设置请求后端的url、允许的图片类型、图片大小等信息:
//上传商品图片var uploadCommImage = upload.render({elem: '#uploadImage',url: commPictureUpload_url,accept: 'images',acceptMime: 'image/jpg, image/jpeg, image/png',exts: 'jpg|jpeg|png',size: 100,before: function (obj) {//预读本地文件示例,不支持ie8obj.preview(function (index, file, result) {$('#commImage').attr('src', result);//图片